(function () {
  let myChart = echarts.init(document.querySelector('.bar'));
  let item = {
    value: 1200, // 值
    tooltip: { extraCssText: 'opacity:0' }, // 额外附加到浮层的 css 样式
    itemStyle: {
      // 图形样式。
      color: '#254065', // 柱条的颜色。
    },
    emphasis: {
      // 鼠标移动上去的hover的样式
      itemStyle: {
        // 图形样式。
        color: '#254065', // 柱条的颜色。
      },
    },
  };
  let option = {
    color: new echarts.graphic.LinearGradient(
      0,
      0,
      0,
      1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
      [
        { offset: 0, color: '#00fffb' },
        { offset: 1, color: '#0061ce' },
      ] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
    ),
    tooltip: {
      trigger: 'item',
      // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      //     type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      // }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '5%',
      containLabel: true,
      borderColor: 'rgba(0, 240, 255, 0.3)',
      show: true,
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '上海',
          '广州',
          '北京',
          '深圳',
          '合肥',
          '',
          '......',
          '',
          '杭州',
          '厦门',
          '济南',
          '成都',
          '重庆',
        ],
        axisTick: {
          // 刻度
          show: false,
        },
        axisLabel: {
          // 文字
          color: '#4c9bfd',
        },
        axisLine: {
          // xAxis轴-垂直线段
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          // 刻度
          show: false,
        },
        axisLabel: {
          // 文字
          color: '#4c9bfd',
        },
        axisLine: {
          // y轴-垂直线段
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)',
          },
        },
        splitLine: {
          // 分割线(横向)
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)',
          },
        },
      },
    ],
    series: [
      {
        name: '用户统计',
        type: 'bar',
        barWidth: '60%',
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          item,
          item,
          item,
          900,
          750,
          600,
          480,
          240,
        ],
      },
    ],
  };
  //   let item = {
  //     value: 1200, // 值
  //     tooltip: { extraCssText: 'opacity:0' }, // 额外附加到浮层的 css 样式
  //     itemStyle: {
  //       // 图形样式。
  //       color: '#254065', // 柱条的颜色。
  //     },
  //     emphasis: {
  //       //  鼠标移动上去hover的样式
  //       itemStyle: {
  //         // 图形样式。
  //         color: '#254065', // 柱条的颜色。
  //       },
  //     },
  //   };
  //   option = {
  //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //       { offset: 0, color: '#00fffb' }, // 0 起始颜色
  //       { offset: 1, color: '#0061ce' }, // 1 结束颜色
  //     ]),
  //     grid: {
  //       // 直角坐标系内绘图网格
  //       left: '3%', // grid 组件离容器左侧的距离
  //       right: '4%',
  //       bottom: '3%',
  //       top: '4%',
  //       containLabel: true, // grid 区域是否包含坐标轴的刻度标签
  //       borderColor: 'rgba(0, 240, 255, 0.3)',
  //       show: true,
  //     },
  //     xAxis: {
  //       type: 'category',
  //       data: [
  //         '上海',
  //         '广州',
  //         '北京',
  //         '深圳',
  //         '合肥',
  //         '',
  //         '......',
  //         '',
  //         '杭州',
  //         '厦门',
  //         '济南',
  //         '成都',
  //         '重庆',
  //       ],
  //     },
  //     axisTick: {
  //       show: false, // 不显示坐标轴刻度
  //       alignWithLabel: true,
  //     },
  //     // 刻度文字
  //     axisLabel: {
  //       color: '#4c9bfd', //刻度文字颜色
  //     },
  //     yAxis: {
  //       type: 'value',
  //     },
  //     axisLabel: {
  //       // 刻度文字颜色
  //       color: '#4c9bfd',
  //     },
  //     // 坐标轴刻度相关设置。
  //     axisTick: {
  //       show: false, // 不显示坐标轴刻度
  //     },
  //     splitLine: {
  //       //  轴线相关设置
  //       lineStyle: {
  //         color: 'rgba(0, 240, 255, 0.3)', // 坐标轴线(分割线)的颜色
  //       },
  //     },
  //     series: [
  //       {
  //         data: [
  //           2100,
  //           1900,
  //           1700,
  //           1560,
  //           1400,
  //           item,
  //           item,
  //           item,
  //           900,
  //           750,
  //           600,
  //           480,
  //           240,
  //         ],
  //         name: '用户统计',
  //         type: 'bar',
  //         barWidth: '60%',
  //       },
  //     ],
  //   };
  myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });
})();
